<!--
 * @Author: gy
 * @Date: 2019-12-24 15:13:01
 * @LastEditors  : wl
 * @LastEditTime : 2020-06-17 17:39:10
 -->
<!--  -->
<template>
  <div class="layout-content">
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="角色名称" prop="role_name">
        <el-input v-model="form['role_name']" placeholder="请输入角色名称" @blur="roleNameCheck" />
        <span class="errorText" v-show="form['checkParam']['uniqueRoleName']">该用角色名称已经被注册</span>
      </el-form-item>
      <el-form-item label="权限字符" prop="role_code">
        <el-input v-model="form['role_code']" placeholder="请输入权限字符" @blur="roleCodeCheck" />
        <span class="errorText" v-show="form['checkParam']['uniqueRoleCode']">该用权限字符已经被注册</span>
      </el-form-item>
      <el-form-item label="显示顺序" prop="role_sort">
        <el-input type="number" v-model.number="form['role_sort']" placeholder="请输入显示顺序" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="form['status']"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="0"
          inactive-value="1"
        ></el-switch>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form['remark']" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="菜单权限" prop="menuIds">
        <el-tree
          class="role-tree"
          :data="menuList"
          :props="defaultProps"
          :default-expand-all="expanded"
          :default-checked-keys="form['menuIds']"
          :check-strictly="false"
          show-checkbox
          node-key="id"
          @check="treeCheck"
          ref="tree"
        ></el-tree>
        <!-- <el-cascader
          v-model="form['menuIds']"
          :options="menuList"
          :props="props"
          collapse-tags
          :show-all-levels="false"
        clearable></el-cascader>-->
      </el-form-item>
    </el-form>
    <!-- <div class="handle-btn">
      <el-button type="primary" @click="handleConfirm">确定</el-button>
      <el-button @click="handleCancel">关闭</el-button>
    </div>-->
  </div>
</template>

<script>
import {
  getMenuTreeData, // 获取菜单树
  getRoleMenuTreeData, // 由角色获取对应菜单
  checkRoleNameUnique, // 名称唯一
  checkRoleCodeUnique // 编码
} from "@/api/api";
import SystemMixin from "@/mixins/SystemMixin";
export default {
  name: "AddRole",
  props: {
    titles: {
      type: String,
      default: () => ""
    }
  },
  mixins: [SystemMixin],
  data() {
    let TreeId = (rule, value, fn) => {
      let idList = this.$refs["tree"].getCheckedNodes();
      if (idList.length === 0) {
        fn(new Error("请选择上级菜单"));
      } else {
        fn();
      }
    };
    return {
      // editCheckId: "", // 单选
      // filterText: "",
      menuList: [], // tree树
      defaultProps: {
        children: "children",
        label: "name"
      },
      expanded: false, // 折叠打开
      // checkedKeys: [], // 编辑选中的元素
      form: {
        role_code: "",
        role_name: "",
        role_sort: null,
        remark: "",
        // 唯一性检测
        checkParam: {
          uniqueRoleName: false,
          uniqueRoleCode: false
        },
        menuIds:[]
      },
      // checkRepeatParam: {
      //   url: '/system/api/Role/CheckRoleNameUnique',
      //   param: 'role_name',
      //   methods: 'get'
      // },
      moduleHidden: false,
      menuList: [],
      props: { multiple: true },
      rules: {
        role_name: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur"
          }
        ],
        role_code: [
          {
            required: true,
            message: "请输入权限字符",
            trigger: "blur"
          }
        ],
        role_sort: [
          {
            required: true,
            message: "请输入显示顺序",
            trigger: "blur"
          }
        ],
        status: [
          {
            required: true,
            message: "请输选择状态",
            trigger: "change"
          }
        ],
        menuIds: [
          {
            required: true,
            message: "请输选择菜单",
            validator: TreeId
          }
        ]
      }
    };
  },
  created() {
    // 全部菜单
    getMenuTreeData().then(res => {
      if (res.code === 0) {
        this.menuList = this.assembleTreeData(res.data, "id", "pId");
      }
    });
    // // 由角色获取对应菜单
    // getRoleMenuTreeData({roleId:this.uid}).then(res => {
    //   if(res.code === 0) {
    //     this.menuList = res.data
    //     console.log(res, 'getRoleMenuTreeData')
    //   }
    // })
  },
  methods: {
    // 角色名称
    async roleNameCheck() {
      if (this.form["role_name"] === "") {
        this.form["checkParam"]["uniqueRoleName"] = false;
      } else {
        this.form["checkParam"][
          "uniqueRoleName"
        ] = await this.checkUnique("/system/api/Role/CheckRoleNameUnique", {
          role_name: this.form["role_name"]
        });
      }
    },
    async roleCodeCheck() {
      if (this.form["role_code"] === "") {
        this.form["checkParam"]["uniqueRoleCode"] = false;
      } else {
        this.form["checkParam"][
          "uniqueRoleCode"
        ] = await this.checkUnique("/system/api/Role/CheckRoleCodeUnique", {
          role_code: this.form["role_code"]
        });
      }
    },
    treeCheck(item, data) {
      this.form['menuIds'] = data['checkedKeys']
    }
    // handleConfirm() {
    //   this.$emit('handleConfirm', this.checkParam)
    // },
    // handleCancel() {
    //   this.$emit('handleCancel')
    // }
  },
  watch: {
    titles: {
      handler(val) {
        if (val === "新增") {
          this.moduleHidden = false;
        } else {
          this.moduleHidden = true;
        }
      },
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.select-depart {
  width: 107px;
  line-height: 34px;
  background: linear-gradient(
    0deg,
    rgba(70, 127, 255, 1),
    rgba(126, 166, 253, 1)
  );
  box-shadow: 0px 5px 7px 0px rgba(213, 215, 218, 0.9);
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  cursor: pointer;
}
.el-tree.role-tree {
  background: #f5f7f9;
}
</style>
